/**
 * @name DetailCover
 * @desc 点开一个marker时弹出的详情模态框
 * @author darcrand
 * @version 2018-10-02
 */

import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'
import './styles.scss'
import closeIco from '@/assets/icons/close.svg'

@inject('MapData')
@observer
class DetailCover extends Component {
    static defaultProps = {
        show: false,
        hash: '',
        onClose: () => {}
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.hash !== this.props.hash) {
            console.log('update', nextProps.hash)
            this.props.MapData.getDetail(nextProps.hash)
        }
    }

    render() {
        return (
            <div classes={this.props.show ? 'container-show' : 'container-hide'}>
                <div classes="content">
                    <h2 classes="title-bar">
                        <span classes="title">标题</span>
                        <i
                            classes="close"
                            style={{ backgroundImage: `url("${closeIco}")` }}
                            onClick={this.props.onClose}
                        />
                    </h2>
                    <div classes="content-wrap" />
                </div>
            </div>
        )
    }
}

export default DetailCover
